<template>
    <view class="content" style="padding-bottom: 1upx;">
        <div class="form-list">
            <div class="item">
                <label>产品名称</label>
                <input type="text" v-model="data.name" value="" placeholder="填写产品名称" />
            </div>
            <div class="item">
                <label>产品数量</label>
                <input type="number" v-model="data.number" value="" placeholder="填写产品数量" />
            </div>
            <div class="item">
                <label>产品价格</label>
                <input type="text" value="" v-model="data.price" placeholder="填写产品价格" />
            </div>
        </div>
        <div class="form-list">
            <div class="item item-images-box" style="padding-bottom: 1upx;">
                <div class="img-item" v-for="(item,index) in data.url" :key="index">
                    <image :src="item" mode="aspectFill"></image>
                    <div class="close" @tap="removePic(index)">-</div>
                </div>
                <div class="img-item" @tap="uploadFiles">
                    <image src="../../static/images/add_images.png" mode="aspectFill"></image>
                </div>
            </div>
        </div>
        <button class="ok-button" @tap="submitData">确认</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                data : {
                    name : '',
                    number: '',
                    price : '',
                    url : []
                }
            }
        },
        onLoad(e) {
            console.info(uni.getStorageSync('product_list'))
            console.info("-----------------------")
        },
        methods: {
            removePic(index) {
                let t = this;
                uni.showModal({
                	title: '提示',
                	content: '是否要删除此图片？',
                	success: function(res) {
                        if (res.confirm) {
                            t.data.url.splice(index, 1);
                        }
                    },
                })
            },
            submitData() {
                let t = this;
                if (!this.data.name) {
                	this.util.uToast({
                		tit: '请填写产品名称'
                	});
                	return false;
                }
                if (!this.data.number) {
                	this.util.uToast({
                		tit: '请填写产品数量'
                	});
                	return false;
                }
                if (!this.data.price) {
                	this.util.uToast({
                		tit: '请填写产品价格'
                	});
                	return false;
                }
                let list = uni.getStorageSync('product_list');
                if( !list ) list = [];
                list.push( { name:t.data.name,number:t.data.number,price:t.data.price,url:t.data.url.join(",") } );
                uni.setStorageSync('product_list' , list);
                uni.showModal({
                	title: '提示',
                	showCancel: false,
                	content: '产品添加成功',
                	success: function(res) {
                		uni.navigateTo({
                		    url : 'index'
                		})
                	}
                })
            },
            uploadFiles() {
            	let t = this;
            	uni.chooseImage({
            		count: 1,
            		sizeType: ['compressed'],
            		success: (chooseImageRes) => {
                        uni.showLoading({
                        	title: '加载中'
                        });
            			const tempFilePaths = chooseImageRes.tempFilePaths;
            			uni.uploadFile({
            				url: t.util.BASEURL+'api/shop/home/upheardimage',
            				filePath: tempFilePaths[0],
            				name: 'image',
            				method: 'POST',
            				formData: {
            					'token': uni.getStorageSync('token')
            				},
            				success: (res) => {
                                uni.hideLoading();
            					res = JSON.parse(res.data)
                                if( res.code == 1 ) {
                                    t.data.url.push( t.util.BASEURL+'upload'+res.data.src );
                                    console.info(t.data.url)
                                } else {
                                    uni.showModal({
                                    	title: '提示',
                                    	showCancel: false,
                                    	content: res.msg || '程序异常，稍后再试。',
                                    	success: function(res) {
                                    		if (res.confirm) {}
                                    	}
                                    })
                                }
            				},
                            fail(res) {
                                uni.hideLoading();
                                uni.showToast({
                                    title: res.msg || '获取数据失败，请稍后再试！',
                                    icon: 'none',
                                    duration:  2000
                                });
                            },
            			});
            		}
            	});
            },
        },
    }
</script>
<style>
    page {
        background: #f5f5f5;
    }

    .item-rows {
        background: #f8f9fa;
        border-radius: 6upx;
        padding: 10upx 20upx;
        display: flex;
        align-content: center;
        justify-content: space-between;
        width: 100%;
    }

    .item-rows .cont{
        display: flex;
        align-items: center;
    }
    .item-rows .cont p {
        margin-right: 40upx;
        font-size:28upx;
    }

    .item-rows .oper image {
        width: 31upx;
        height: 31upx;
        margin-left: 40upx;
    }

    .ok-button {
        color: #fff;
        margin: 40upx 30upx;
        height: 70upx;
        line-height: 70upx;
        overflow: hidden;
        border-radius: 50upx;
        font-size: 30upx;
        background: url(../../static/images/btn_bg.png);
    }

    .form-list {
        background: #fff;
        padding: 0 30upx;
        margin: 20upx 0;
        ;
    }

    .form-list .item {
        padding: 25upx 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1upx solid #E6E6E6;
    }

    .form-list .clogos {
        width: 80upx;
        height: 80upx;
        margin-right: 20upx;
    }

    .form-list label {
        font-size: 30upx;
    }

    .form-list .right {
        display: flex;
        align-items: center;
    }

    .form-list .item:last-child {
        border: 0;
    }

    .form-list .item textarea {
        width: 100%;
        height: 160upx;
        font-size: 26upx;
    }

    .form-list .arrow_right {
        width: 30upx;
        height: 30upx;
    }

    .form-list input {
        flex: 1;
        font-size: 24upx;
        text-align: right;
    }

    .item-images-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start !important;
    }

    .item-images-box .img-item {
        position: relative;
        width: 175upx;
        height: 175upx;
        margin-right: 40upx;
        margin-bottom: 30upx;
    }

    .item-images-box .img-item image {
        width: 100%;
        height: 100%;
        border-radius: 6upx;
    }

    .item-images-box .img-item .close {
        background: #e63535;
        width: 30upx;
        height: 30upx;
        line-height: 20upx;
        text-align: center;
        color: #fff;
        font-weight: 800;
        position: absolute;
        right: -10upx;
        top: -10upx;
        border-radius: 50%;
        display: block;
    }
</style>
